<template>
  <div class="model-con">
    <div class="title">审核评鉴</div>
    <div class="mytable">
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        max-height="500"
        row-id="id"
        size="medium"
        resizable
        :scroll-y="{ enabled: false }"
        :data="tableData"
        highlight-hover-row
        header-align="center"
        align="center"
        @cell-click="cellClickEvent"
        :cell-class-name="cellClassName"
        :span-method="mergeRowMethod">
        <!-- :header-cell-class-name="headerStyle"
      :row-class-name="rowClass" -->
        <vxe-column field="status" title="平时考核通知" min-width="120" fixed="left">
          <template #default="{ row }">
            <span v-if="row.status == '1'">已发布</span>
            <span v-else-if="row.status == '0'" class="redColor">未发布</span>
          </template>
        </vxe-column>
        <vxe-column field="startTime" title="季度考核开始时间" min-width="140"></vxe-column>
        <vxe-colgroup field="group0" title="评价情况">
          <vxe-column field="pjName" title="评鉴人" min-width="150">
            <!-- <template #default="{ row }">
              {{ row.pjName.userName }}
            </template> -->
          </vxe-column>
          <vxe-column field="assessTypeName" title="评价类型" min-width="150">
            <!-- <template #default="{ row }">
              {{ row.evaluateType | evaluateTypeZh }}
            </template> -->
          </vxe-column>
          <vxe-column field="evaluateUserList" title="应评价人员" min-width="150">
            <template #default="{ row }">
              {{ row.evaluateUserList.length }}
            </template>
          </vxe-column>
          <vxe-column field="schedule" title="评价进度" min-width="150">
            <template #default="{ row }">
              {{ row.schedule.assessFlag | handelSchedule }}
            </template>
          </vxe-column>
        </vxe-colgroup>
      </vxe-table>
    </div>

    <!-- 应评价人员 开始-->
    <XnDialog custom-class="branch_dialog" title="应评价人员" :visible.sync="dialogShow" @close="dialogShow = false">
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        height="400"
        row-id="id"
        size="medium"
        resizable
        :scroll-y="{ enabled: false }"
        :data="evaluateUserListShow"
        highlight-hover-row
        header-align="center"
        align="center">
        <!-- :header-cell-class-name="headerStyle"
      :row-class-name="rowClass" -->
        <vxe-column field="userName" title="人员" min-width="100" fixed="left"></vxe-column>
        <vxe-column field="orgAlias" title="所属单位" min-width="120">
          <!-- <template #default="{ row }"> {{ row.orgAlias }}{{ row.post }} </template> -->
        </vxe-column>
        <!-- <vxe-column field="userCategory" title="人员类别" min-width="120">
          <template #default="{ row }">{{ row.userCategory | handelUserCategory }}</template>
        </vxe-column> -->
      </vxe-table>
      <pagination
        :page-size.sync="tablePage.pageSize"
        :total="tablePage.totalSize"
        :current-page.sync="tablePage.pageNum"
        :pageSizes="[10, 20]"
        layout="slot,prev, pager, next, sizes, jumper"
        @change="onPageChange"></pagination>
    </XnDialog>

    <!-- 应评价人员 结束-->
    <!-- 评价待办未生成详情 开始-->
    <XnDialog
      custom-class="branch_dialog branch_dialog1"
      title="评价待办未生成详情"
      :visible.sync="dialogShow1"
      @close="dialogShow1 = false">
      <ul class="notice-list">
        <li class="notice-li first">
          <p>待办生成条件</p>
          <p>是否完成</p>
        </li>
        <li class="notice-li" v-for="(item, index) in evaluateScheduleDialogData" :key="index">
          <p>{{ item.name }}</p>
          <i :class="item.iconClass"></i>
        </li>
        <!-- <li class="notice-li">
          <p>分管领导评价已全部提交</p>
          <i class="el-icon-success green"></i>
        </li>
        <li class="notice-li">
          <p>待办生成条件</p>
          <i class="el-icon-success green"></i>
        </li> -->
      </ul>
    </XnDialog>

    <!-- 评价待办未生成详情 结束-->
  </div>
</template>

<script>
import { auditValuation } from '@api/modules/api-staAnalysis.js'
import XnDialog from '@com/xnDialog.vue'
import pagination from '@com/pagination'

export default {
  name: 'AuditEvaluation',
  components: { XnDialog, pagination },
  props: {
    selectParams: {
      type: Object,
      default: () => {},
    },
    /* 季度名称 */
    gradeQuarterName: {
      type: String,
      default: '',
    },
    // 是否是镜湖区
    isOrganJHQ: {
      // type: Boolean,
      // default: false,
    },
  },
  data() {
    return {
      tableData: [],
      dialogShow: false,
      dialogShow1: false,
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),
      // 应评价人员点击弹框数据
      evaluateUserList: [],
      evaluateUserListShow: [],
      tablePage: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
      },
      // 评价进度点击弹框数据
      evaluateScheduleDialogData: {},
      needPlusMinusPoints: true,
      needPeopleAssess: true,
    }
  },
  watch: {
    selectParams: {
      handler(newValue, oldValue) {
        if (newValue.quarter && newValue.year && newValue.orgId) {
          this.pageInit()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  filters: {
    handelSchedule(val) {
      switch (val) {
        case '1':
          return '评价已完成'
        case '2':
          return '评价进行中'
        case '3':
          return '评价待办未生成'
        default:
          return '-'
        // break
      }
    },
    evaluateTypeZh(val) {
      switch (val) {
        case 'mainLeader':
          return '主要领导评价'
        case 'leader':
          return '分管领导评价'
        case 'leadershipEvaluation':
          // return '领导评鉴'
          return '主要领导评价'
        default:
          return '-'
        // break
      }
    },
    handelUserCategory(val) {
      switch (val) {
        case 1:
          return '非领导成员公务员'
        case 2:
          return '领导成员公务员'
        case 3:
          return '曾经担任领导职务人员和享受非领导职务待遇人员'
        default:
          return '-'
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    async pageInit() {
      const { data } = await auditValuation({
        quarterTitle: `${this.selectParams.year}年${this.gradeQuarterName}`,
        tenantId: this.userInfo.tenantId,
        userId: this.userInfo.userId,
        ...this.selectParams,
      })
      const { auditEvaluationVoList, assessment, needPlusMinusPoints, needPeopleAssess } = data
      const dataArr = []
      let obj = {}
      this.needPlusMinusPoints = needPlusMinusPoints
      this.needPeopleAssess = needPeopleAssess
      this.$emit('min-zhu', this.needPeopleAssess)
      auditEvaluationVoList.forEach(item => {
        const li = item.userAssessMemberData
        obj = {
          status: assessment.status,
          startTime: assessment.startTime,
          pjName: item.userInfo.userName,
          assessTypeName: li.assessTypeName,
          schedule: {},
        }
        //  分管领导评价
        if (li.leaderAssessList && li.leaderAssessList.length > 0) {
          const copyObj = JSON.parse(JSON.stringify(obj))
          copyObj.evaluateType = 'leader'
          copyObj.evaluateUserList = li.leaderAssessList
          copyObj.schedule = li.leaderSchedule
          dataArr.push(copyObj)
        }
        // 主要领导评价
        if (li.mainLeaderAssessList && li.mainLeaderAssessList.length > 0) {
          const copyObj = JSON.parse(JSON.stringify(obj))
          copyObj.evaluateType = 'mainLeader'
          copyObj.evaluateUserList = li.mainLeaderAssessList
          copyObj.schedule = li.mainLeaderSchedule
          copyObj.showMain = false
          for (let index = 0; index < auditEvaluationVoList.length; index++) {
            const element = auditEvaluationVoList[index].userAssessMemberData
            // 弹框是否显示分管领导
            if (element.leaderAssessList && element.leaderAssessList.length > 0) {
              copyObj.showMain = true
              break
            }
          }

          dataArr.push(copyObj)
        }
        // }
      })
      this.tableData = dataArr
    },
    /* 分页切换 */
    onPageChange(obj) {
      this.tablePage.pageNum = obj.pageNumber
      this.tablePage.pageSize = obj.pageSize
      this.dialogInit()
    },
    dialogInit() {
      const { pageSize, pageNum } = this.tablePage
      this.evaluateUserListShow = this.evaluateUserList.slice((pageNum - 1) * pageSize, pageNum * pageSize)
    },
    // 点击单元格
    cellClickEvent({ row, column }) {
      console.log('row :>> ', row)
      if (['evaluateUserList'].includes(column.property)) {
        this.dialogShow = true
        this.evaluateUserList = row.evaluateUserList
        this.tablePage = {
          pageNum: 1,
          pageSize: 10,
        }
        this.tablePage.totalSize = this.evaluateUserList.length
        this.dialogInit()
      } else if (['schedule'].includes(column.property)) {
        // 评价待办未生成
        if (row.schedule.assessFlag === '3') {
          const { leadershipEvaluationflag, plusMinusPointsSchedule, democracyAssessmentSchedule } = row.schedule
          if (row.evaluateType === 'leader') {
            // 分管领导评价
            this.evaluateScheduleDialogData = [
              {
                name: '季度考核是否开始',
                iconClass: 'el-icon-error red',
              },
            ]
          } else if (row.evaluateType === 'mainLeader') {
            // 主要领导评价
            this.evaluateScheduleDialogData = []
            if (this.selectParams.pid === '-1') {
              this.evaluateScheduleDialogData.push({
                name: '分管领导评价是否已全部提交',
                iconClass: leadershipEvaluationflag ? 'el-icon-success green' : 'el-icon-error red',
              })
            } else {
              this.evaluateScheduleDialogData.push({
                name: '部门负责人评价是否已全部提交',
                iconClass: leadershipEvaluationflag ? 'el-icon-success green' : 'el-icon-error red',
              })
            }
            if (!row.showMain || this.needPeopleAssess) {
              this.evaluateScheduleDialogData.push({
                name: '民主测评进度',
                iconClass: democracyAssessmentSchedule ? 'el-icon-success green' : 'el-icon-error red',
              })
            }
            if (!row.showMain || this.needPlusMinusPoints) {
              this.evaluateScheduleDialogData.push({
                name: '加减分申报进度',
                iconClass: plusMinusPointsSchedule ? 'el-icon-success green' : 'el-icon-error red',
              })
            }
          } else if (row.evaluateType === 'leadershipEvaluation') {
            // 领导评鉴
            this.evaluateScheduleDialogData = []
            if (!this.needPeopleAssess) {
              this.evaluateScheduleDialogData.push({
                name: '民主测评进度',
                iconClass: democracyAssessmentSchedule ? 'el-icon-success green' : 'el-icon-error red',
              })
            }
            if (!this.needPlusMinusPoints) {
              this.evaluateScheduleDialogData.push({
                name: '加减分申报进度',
                iconClass: plusMinusPointsSchedule ? 'el-icon-success green' : 'el-icon-error red',
              })
            }
          }
          if (this.evaluateScheduleDialogData.length) {
            this.dialogShow1 = true
          }
        }
      }
    },
    cellClassName({ row, column }) {
      if (['evaluateUserList'].includes(column.property)) {
        return 'col-cursor'
      }
      if (['schedule'].includes(column.property)) {
        if (row.schedule.assessFlag === '1') {
          // 评价已完成
          return 'col-cursor-over'
        } else if (row.schedule.assessFlag === '2') {
          //  2:评价进行中
          return 'col-cursor-ing'
        } else if (row.schedule.assessFlag === '3') {
          // 3:评价待办未生成
          if (this.isOrganJHQ) {
            return 'col-cursor-ing'
          } else {
            return 'col-cursor-not'
          }
        }
      }
    },
    // 通用行合并函数（将相同多列数据合并为一行）
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      const fields = ['status', 'startTime', 'pjName']
      const cellValue = row[column.property]
      // if (cellValue && fields.includes(column.property)) {
      if (fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.model-con {
  border: 1px solid #ebeef5;
  padding: 20px;
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  .sub-title {
    font-size: 14px;
    color: #333;
    margin-top: 15px;
  }
  .mytable {
    margin-top: 30px;
    .status {
      color: #bc1316;
    }
    /deep/.vxe-body--column {
      &.col-cursor {
        cursor: pointer;
        &:hover {
          text-decoration-line: underline;
          color: #0957af;
        }
      }

      &.col-cursor-over {
        color: #ccc;
      }
      &.col-cursor-ing {
        color: #bc1316;
      }
      &.col-cursor-not {
        color: #bc1316;
        cursor: pointer;
        &:hover {
          text-decoration-line: underline;
          color: #0957af;
        }
      }
    }
  }
}
::v-deep .branch_dialog1 {
  .el-dialog__body {
    padding: 0;
    .notice-list {
      .notice-li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        border-bottom: 1px solid #ddd;
        padding: 0 20px;
        font-size: 14px;
        &.first {
          background: #f2f2f2;
        }
        i {
          font-size: 16px;
          &.red {
            color: #bc1316;
          }
          &.green {
            color: #20b759;
          }
        }
      }
    }
  }
}
.redColor {
  color: #b61213;
}
</style>
